<!DOCTYPE html>
<html>
<head>

<title>Demo Chat</title>

<link href="bootstrap.css" rel="stylesheet">

<style>
body {
	padding: 20px;
}

.console {
	height: 400px;
	overflow: auto;
}

.username-msg {
	color: orange;
}

.connect-msg {
	color: green;
}

.disconnect-msg {
	color: red;
}

.send-msg {
	color: #888
}
</style>


<script src="js/socket.io/socket.io.js"></script>
<script src="js/moment.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>
	var userName1 = 'user1_' + Math.floor((Math.random() * 1000) + 1);
	var userName2 = 'user2_' + Math.floor((Math.random() * 1000) + 1);

	var chat1Socket = io.connect('http://localhost:9092/chat1');
	var chat2Socket = io.connect('http://localhost:9092/chat2');

	function connectHandler(parentId) {
		return function() {
			output(
					'<span class="connect-msg">Client has connected to the server!</span>',
					parentId);
		}
	}

	function messageHandler(parentId) {
		return function(data) {
			output('<span class="username-msg">' + data.userName + ':</span> '
					+ data.message, parentId);
		}
	}

	function disconnectHandler(parentId) {
		return function() {
			output(
					'<span class="disconnect-msg">The client has disconnected!</span>',
					parentId);
		}
	}

	function sendMessageHandler(parentId, userName, chatSocket) {
		var message = $(parentId + ' .msg').val();
		$(parentId + ' .msg').val('');

		var jsonObject = {
			room : 'r2',
			userName : userName,
			message : message
		};
		chatSocket.json.send(jsonObject);
	}

	chat1Socket.on('connect', connectHandler('#chat1'));
	chat2Socket.on('connect', connectHandler('#chat2'));

	chat1Socket.on('message', messageHandler('#chat1'));
	chat2Socket.on('message', messageHandler('#chat2'));

	chat1Socket.on('disconnect', disconnectHandler('#chat1'));
	chat2Socket.on('disconnect', disconnectHandler('#chat2'));

	function sendDisconnect1() {
		chat1Socket.disconnect();
	}

	function sendDisconnect2() {
		chat2Socket.disconnect();
	}

	function sendMessage1() {
		sendMessageHandler('#chat1', userName1, chat1Socket);
	}

	function sendMessage2() {
		sendMessageHandler('#chat2', userName2, chat2Socket);
	}

	function output(message, parentId) {
		var currentTime = "<span class='time'>"
				+ moment().format('HH:mm:ss.SSS') + "</span>";
		var element = $("<div>" + currentTime + " " + message + "</div>");
		$(parentId + ' .console').prepend(element);
	}

	$(document).keydown(function(e) {
		if (e.keyCode == 13) {
			$('#send').click();
		}
	});
</script>
</head>

<body>

	<h1>Namespaces demo chat</h1>

	<br />

	<div id="chat1" style="width: 49%; float: left;">
		<h4>chat1</h4>
		<div class="console well"></div>

		<form class="well form-inline" onsubmit="return false;">
			<input class="msg input-xlarge" type="text"
				placeholder="Type something..." />
			<button type="button" onClick="sendMessage1()" class="btn" id="send">Send</button>
			<button type="button" onClick="sendDisconnect1()" class="btn">Disconnect</button>
		</form>
	</div>

	<div id="chat2" style="width: 49%; float: right;">
		<h4>chat2</h4>
		<div class="console well"></div>

		<form class="well form-inline" onsubmit="return false;">
			<input class="msg input-xlarge" type="text"
				placeholder="Type something..." />
			<button type="button" onClick="sendMessage2()" class="btn" id="send">Send</button>
			<button type="button" onClick="sendDisconnect2()" class="btn">Disconnect</button>
		</form>
	</div>



</body>

</html>
